/* 基础样式 */  
body {  
    margin: 0;  
    padding: 20px;  
    color: #333;  
}  
  
h3 {  
    margin: 0 0 15px 0;  
    font-size: 1.1em;  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
}  

/* 排序选项样式 */  
#sort-options {  
    margin-bottom: 20px;  
    text-align: center;  
}  
  
#sort-select {  
    margin: 0 10px;  
    padding: 5px;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
    font-size: 16px;  
    line-height: 1.5;  
    color: #555;  
    background-color: #fff;  
    background-image: none;  
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);  
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);  
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;  
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;  
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;  
}  
  
/* 表格样式 */  
#student-table {  
    width: 100%;  
    border-collapse: collapse;  
    margin-bottom: 20px;  
}  
  
#student-table th, #student-table td {  
    padding: 8px;  
    text-align: left;  
    border-bottom: 1px solid #ddd;  
}  
  
#student-table th {  
    background-color: #f2f2f2;  
    font-weight: bold;  
}  

#student-table tr:nth-child(odd) {  
    background-color: #f4f4f4;  
}  
#student-table tr:nth-child(even) {  
    background-color: #f9f9f9;  
}  

/* 为所有的input元素添加样式 */  
input[type="number"] {  
    /* 宽度和高度 */  
    width: 80px;  
    height: 30px;  
  
    /* 边框和内边距 */  
    border: 1px solid #ccc;  
    border-radius: 4px;  
    padding: 0 5px;  
  
    /* 字体样式 */  
    font-size: 14px;  
    line-height: 30px;  
  
    /* 过渡效果，使边框变化更平滑 */  
    transition: border-color 0.2s ease-in-out;  
  
    /* 去除默认的箭头 */  
    -moz-appearance:textfield; /* Firefox */  
}  
  
/* 当input元素获得焦点时 */  
input[type="number"]:focus {  
    /* 改变边框颜色 */  
    border-color: #007bff;  
    outline: none; /* 去除默认的蓝色边框 */  
}  
  
/* 只读input的样式 */  
input[type="number"][readonly] {  
    /* 背景色和字体颜色 */  
    background-color: #f5f5f5;  
    color: #6c757d;  
  
    /* 禁用光标 */  
    cursor: not-allowed;  
}  

.message {  
    position: fixed;  
    top: 20px;  
    right: 20px;  
    min-width: 200px;  
    background-color: #33dc3545;  
    color: white;  
    padding: 10px;  
    border-radius: 5px;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);  
    z-index: 1000;  
    animation: fadeOut 3s ease-in-out forwards;  
    margin-bottom: 10px; /* 为了在堆叠时有一些间距 */  
}  
  
@keyframes fadeOut {  
    0% { opacity: 1; }  
    100% { opacity: 0; transform: translateY(-30px); } /* 向上移动并淡出 */  
}